<template>
  <!--新增、 编辑 -->
  <el-dialog
    :title="addOrEditForm.title"
    :visible.sync="visible"
    width="580px"
    @close="closeDialog('addOrEditForm')"
  >
    <el-form
      ref="addOrEditForm"
      label-width="90px"
      :model="addOrEditForm"
      size="small"
      :rules="rules"
    >
      <el-form-item label="客户端名称" prop="name">
        <el-input v-model="addOrEditForm.name" auto-complete="off" placeholder="请输入客户端名称" />
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-select v-model="addOrEditForm.projectName" filterable placeholder="请选择项目名称">
          <el-option
            v-for="(item, index) in projects"
            :key="index"
            :label="item.projectName"
            :value="item.projectName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户端IP" prop="clientIp">
        <el-input v-model="addOrEditForm.clientIp" auto-complete="off" placeholder="请输入客户端IP" />
      </el-form-item>
      <el-form-item label="客户端端口" prop="clientPort">
        <el-input v-model="addOrEditForm.clientPort" auto-complete="off" placeholder="请输入客户端端口" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="addOrEditForm.remark" type="textarea" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeDialog('addOrEditForm')">取消</el-button>
      <el-button size="small" type="primary" class="title" @click="submitForm('addOrEditForm')">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addClient, updateClient } from '@/api/publicConfig/client'
import { successMessage } from '@/utils/message'
export default {
  data() {
    return {
      visible: false,
      projects: [],
      rules: {
        name: [
          { required: true, message: '客户端组名不能为空', trigger: 'blur' }
        ],
        projectName: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        clientIp: [
          { required: true, message: '客户端IP不能为空', trigger: 'blur' },
          { pattern: /((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/, message: '请填写正确的ip地址', trigger: 'blur' }
        ],
        clientPort: [
          { required: true, message: '客户端端口不能为空', trigger: 'blur' }
        ]
      },
      addOrEditForm: {
        title: '',
        id: '',
        name: '',
        projectName: '',
        clientIp: '',
        clientPort: '',
        isEnable: 1,
        status: 1,
        remark: ''
      }
    }
  },
  mounted() {
    this.projects = this.$store.getters.projects
  },
  methods: {
    init(row) {
      if (row) {
        try {
          this.addOrEditForm.jobParams = JSON.parse(row.methodParams)
        } catch (e) {
          this.addOrEditForm.jobParams = {}
        }
        this.visible = true
        this.addOrEditForm.title = '编辑客户端'
        this.addOrEditForm.id = row.id
        this.addOrEditForm.name = row.name
        this.addOrEditForm.projectName = row.projectName
        this.addOrEditForm.clientIp = row.clientIp
        this.addOrEditForm.clientPort = row.clientPort
        this.addOrEditForm.isEnable = row.isEnable
        this.addOrEditForm.status = row.status
        this.addOrEditForm.remark = row.remark
      } else {
        this.visible = true
        this.addOrEditForm.title = '新增客户端'
      }
    },
    closeDialog() {
      this.$refs['addOrEditForm'].resetFields()
      this.visible = false
      this.addOrEditForm = {
        title: '',
        id: '',
        name: '',
        projectName: '',
        clientIp: '',
        clientPort: '',
        isEnable: 1,
        status: 1,
        remark: ''
      }
    },
    submitForm(Visible) {
      this.$refs[Visible].validate((validate) => {
        this.addOrEditForm.methodParams = JSON.stringify(this.addOrEditForm.jobParams)
        if (validate && Visible === 'addOrEditForm' && this.addOrEditForm.id) {
          // 编辑
          updateClient(this.addOrEditForm).then(data => {
            this.visible = false
            this.$emit('refreshDataList')
            successMessage('保存数据成功')
          })
        } else if (validate && Visible === 'addOrEditForm' && !this.addOrEditForm.id) {
          // 新增
          addClient(this.addOrEditForm).then(data => {
            this.visible = false
            this.$emit('refreshDataList')
            successMessage('保存数据成功')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
</style>
